<template>
  <div class="canvas">
    <el-card class="box-card">
      <h2>数组扁平化</h2>
      <div class="contentDescription">
        <h3>介绍</h3>
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;实现简单数组扁平化及复杂数据数组扁平化
        </div>
        <h3>使用</h3>
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;直接复制粘贴函数传入数组即可
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
        <h2>简单数组扁平化</h2>
        <div class=" contentDescription" >
          <div class="content " >
            <codeBlock :code="bphCode.jdarr"></codeBlock>
          </div>
        </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <h3>方式一:</h3>
        <div style="margin-bottom:10px">
           <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div> &nbsp;&nbsp;&nbsp;&nbsp;split和toString 结合处理</div>
            </li>
          </ul>
        </div>
        <div class="content" >
          <codeBlock :code="bphCode.fnA"></codeBlock>
        </div>
        <h3>结合方式一实现排序:</h3>
        <div style="margin-bottom:10px">
          <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法</div>
            </li>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>new set()是es6新增的数据结构，类似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合，Set本身是一个构造函数，用来生成 Set 数据结构。</div>
            </li>
          </ul>
        </div>
        <div class="content" >
          <codeBlock :code="bphCode.fnB"></codeBlock>
        </div>
        <h3>结合方式二:</h3>
        <div style="margin-bottom:10px">
          <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 
                其中，depth指定要提取嵌套数组的结构深度，默认值为1。但使用 Infinity 作为深度，展开任意深度的嵌套数组。
              </div>
            </li>
          </ul>
        </div>
        <div class="content">
          <codeBlock :code="bphCode.fnC"></codeBlock>
        </div>
        <h3>递归实现:</h3>
        <div style="margin-bottom:10px">
          <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>
                通过循环递归的方式，一项一项地去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接
              </div>
            </li>
          </ul>
        </div>
        <div class="content">
          <codeBlock :code="bphCode.fnD"></codeBlock>
        </div>
        <h3>利用reduce函数迭代:</h3>
        <div style="margin-bottom:10px">
          <ul>
            <li class="df">
              <div><i class="el-icon-location-outline green"></i></div>
              <div>arr.reduce((prev,cur,index,arr)=>{},init)</div>
            </li>
            <li class="df">
              <div style="margin-left:20px"><i class="el-icon-cpu green"></i></div>
              <div>prev:表示上一次调用回调时的返回值，或者初始值init</div>
            </li>
            <li class="df">
              <div style="margin-left:20px"><i class="el-icon-cpu green"></i></div>
              <div>cur:表示当前正在处理的数组元素</div>
            </li>
            <li class="df">
              <div style="margin-left:20px"><i class="el-icon-cpu green"></i></div>
              <div>index:表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1</div>
            </li>
            <li class="df">
              <div style="margin-left:20px"><i class="el-icon-cpu green"></i></div>
              <div>arr: 表示将要原数组</div>
            </li>
            <li class="df">
              <div style="margin-left:20px"><i class="el-icon-cpu green"></i></div>
              <div>init: 表示初始值</div>
            </li>
          </ul>
        </div>
        <div class="content">
          <codeBlock :code="bphCode.fnE"></codeBlock>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>复杂数组扁平化</h2>
      <div class=" contentDescription" >
        <div class="content " >
          <codeBlock :code="bphCode.fzarr"></codeBlock>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <h3>reduce方式:</h3>
        <div style="margin-bottom:10px">
        </div>
        <div class="content">
          <codeBlock :code="bphCode.fnF"></codeBlock>
        </div>
        <h3>递归实现:</h3>
        <div class="content" >
          <codeBlock :code="bphCode.fnG"></codeBlock>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>数组转化为树形结构</h2>
      <div class=" contentDescription" >
        <div class="content " >
          <codeBlock :code="bphCode.treeArr"></codeBlock>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <div class="content">
          <codeBlock :code="bphCode.fnH"></codeBlock>
        </div>
      </div>
    </el-card>
  </div>  
</template>

<script>
import codeBlock from '@/components/code.vue'
import bphCode from './arrLib/pbh'
export default {
  name: "VuedemoCanvas",
  components: {
    codeBlock
  },
  data() {
    return {
      bphCode:bphCode
    };
  },

  mounted() {
    
  },

  methods: {

  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  margin: 0 auto;
  width: 100%;
  height: 360px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 20px;
    // padding: 100px;
    .imgbox {
      position: relative;
      width: 100%;
      height: 100%;
      user-select: none;
      // margin: 100px;
      // padding: 10px;
    }
  }
  .box2 {
    border: 1px solid #928c8c;
    width: 600px;
    height: 300px;
  }
  .imgbox2 {
    width: 600px;
    height: 300px;
    user-select: none;
    // margin: 100px;
    // padding: 10px;
  }
}
.canvas {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  .contentDescription {
    margin-left: 50px;
    .content {
      margin-left: 20px;
    }
  }
}
.box-card {
  width: 80%;
  margin-bottom: 20px;
}
</style>
<style >
.CodeMirror-scroll{
  background-color: #f6f8fa !important;
  height: 500px;
}
.CodeMirror {
  height: 500px;
  overflow-y: hidden;
  background-color: #f6f8fa !important;
}
.code-box{
  height: 100%;
  overflow: auto;
}
.green{
  color: rgb(62, 175, 124);
  margin-right: 10px;
}
.df{
  display: flex;
  line-height: 30px;
}
</style>